<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useWindowSize } from '@vueuse/core'
import { getNews } from '~/service/news'
import { useGlobalStore } from '~/composables/global'

const { locale } = useLocale()

const language = ref(locale.value === 'zh' ? 'zh' : 'en')

const { changeMode } = useHeader('transparent')
const { y } = useWindowScroll()

watch(y, (newY) => {
  changeMode(newY > 90 ? 'light' : 'transparent')
})

definePageMeta({
  title: '新闻资讯',
})

// 获取视口宽度
const { width } = useWindowSize()
const windowWidth = ref(width.value)
watch(width, (newWidth) => {
  windowWidth.value = newWidth
})

const router = useRouter()

// 行业新闻
const industryNews = ref({})
// 公司新闻
const companyNews = ref({})
// 推荐阅读
const recommendList = ref({})

// 新闻列表
const newsList = ref([])
// 获取新闻列表
async function getNewsList() {
  const { list } = await getNews()
  newsList.value = list
  industryNews.value = list?.filter?.(news => news.type === '2')
  companyNews.value = list?.filter?.(news => news.type === '1')
  companyNews.value = companyNews.value?.map((item) => {
    return {
      ...item,
      cover_url: useGlobalStore().resolveImgURL(item.cover_url),
    }
  })
  recommendList.value = list?.filter(news => news.isRecommend === '1')
}

onMounted(async () => {
  await getNewsList()
})

// 新闻类型
const newsType = {
  1: language.value === 'zh' ? '公司新闻' : 'Company News',
  2: language.value === 'zh' ? '行业新闻' : 'Industry News',
}

// 跳转详情页
function toDetail(id) {
  router.push({
    path: '/news/news',
    query: {
      id,
    },
  })
}
useHead({
  title: `新闻中心-超益钢业`,
})
</script>

<template>
  <!-- <div mt="90px" class="pl-[94px] pr-[94px]"> -->
  <div>
    <div h="[400px]" class="flex flex-col items-center justify-center bg-[url(~/assets/img/img_news_banner.png)]">
      <h1 class="text-[46px] text-[#fff]" data-aos="fade-down" data-aos-delay="100">
        {{ $t('menu.news') }}
      </h1>
      <h2 text="uppercase [#ffffff33] [42px]" data-aos="fade-up" data-aos-delay="100">
        NEWS
      </h2>
    </div>
    <section relative v-bind="$attrs">
      <div mt="[50px]" pl="[76px]" text="[18px]" :style="{ padding: windowWidth > 828 ? '0 15%' : '0 20px' }">
        <h1 class="bottom-lined" text="[34px]">
          {{ language === 'zh' ? '公司新闻' : 'Company News' }}
        </h1>
        <div mt="[48px]">
          <div v-if="windowWidth > 828">
            <div v-for="news in companyNews" :key="news.id" p="b-[24px]" border="b-[1px] b-solid b-[#f1f1f1]" flex="~" class="point1 items-start" data-aos="fade-up" data-aos-delay="100" @click="toDetail(news.id)">
              <img class="mr-[48px] w-[390px]" :src="news.cover_url" alt="">
              <div flex="shrink-0" m="r-[32px]" p="x-[18px] y-[2px]" bg="[#0083ff19]" text="center [var(--color-text-primary)]">
                <div text="[42px]">
                  {{ news.publish_date.split?.('-')?.[2] }}
                </div>
                <div text="[18px]">
                  {{ news.publish_date.split?.('-')?.slice(0, 2)?.join('-') }}
                </div>
              </div>
              <div>
                <h4 m="b-[24px]" text="[24px]" v-html="get(news, 'title', locale)">
                </h4>
                <p m="b-[32px]" class="opacity-60" text="[18px]">
                  {{ get(news, 'abstract', locale) }}
                </p>
              </div>
            </div>
          </div>
          <div v-else>
            <div v-for="news in companyNews" :key="news.id" border="b-[1px] b-solid b-[#f1f1f1]" class="point1 items-start" data-aos="fade-up" data-aos-delay="100" @click="toDetail(news.id)">
              <img class="mr-[48px] w-[100%]" :src="news.cover_url" alt="" style="margin-bottom: 20px;">
              <div style="display: flex;">
                <div flex="shrink-0" m="r-[32px]" p="x-[18px] y-[2px]" bg="[#0083ff19]" text="center [var(--color-text-primary)]" class="date">
                  <div text="[22px]">
                    {{ news.publish_date.split?.('-')?.[2] }}
                  </div>
                  <div text="[18px]">
                    {{ news.publish_date.split?.('-')?.slice(0, 2)?.join('-') }}
                  </div>
                </div>
                <h4 m="b-[24px]" text="[24px]" style="display: flex;align-items: center;margin: 0;">
                  {{ news.title }}
                </h4>
              </div>
              <div>
                <p m="t-[10px] b-[20px]" class="opacity-60" text="[18px]">
                  {{ news.abstract }}
                </p>
              </div>
            </div>
          </div>
          <div data-aos="fade-up" data-aos-delay="100">
            <h2 style="font-weight: 700;">
              {{ language === 'zh' ? '推荐阅读' : 'Recommended Reading' }}
            </h2>
          </div>
          <div v-if="windowWidth > 828" m="t-[32px]" grid="~ cols-3 gap-x-[48px] gap-y-[32px]">
            <div v-for="news in recommendList" :key="news.id" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" data-aos="fade-up" data-aos-delay="100" @click="toDetail(news.id)">
              <div>
                <div>
                  <h5 text="[18px]" mb="[10px]">
                    {{ get(news, 'title', locale) }}
                  </h5>
                </div>
                <div text="[#A1A1A1]">
                  {{ news.publish_date }}
                </div>
              </div>
            </div>
          </div>
          <div v-else m="t-[32px]" grid="~ cols-1 gap-x-[48px] gap-y-[32px]">
            <div v-for="news in recommendList" :key="news.id" border="b-[1px] solid [#f1f1f1]" text="[16px]" class="point" data-aos="fade-up" data-aos-delay="100" @click="toDetail(news.id)">
              <div>
                <h5 text="[18px]">
                  {{ get(news, 'title', locale) }}
                </h5>
              </div>
              <div text="[#A1A1A1]">
                {{ news.publish_date }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section relative v-bind="$attrs" mb="[200px]">
      <div mt="[50px]" pl="[76px]" text="[18px]" :style="{ padding: windowWidth > 828 ? '0 15%' : '0 20px' }" data-aos="fade-up" data-aos-delay="100">
        <h1 class="bottom-lined" text="[34px]" data-aos="fade-up">
          {{ language === 'zh' ? '行业新闻' : 'Industry News' }}
        </h1>
        <div mt="[48px]">
          <div v-if="windowWidth > 828" m="t-[32px]" grid="~ cols-2 gap-x-[48px] gap-y-[32px]">
            <div v-for="news in industryNews" :key="news.id" flex="~ 1" justify="between" border="b-[1px] solid [#f1f1f1]" p="b-[24px]" text="[16px]" class="point" @click="toDetail(news.id)">
              <div>
                <h5 text="[18px]" mb="[10px]">
                  {{ get(news, 'title', locale) }}
                </h5>
                <div text="[#1f1f1f66]">
                  {{ newsType[`${news.type}`] }}
                </div>
              </div>
              <div text="[#A1A1A1]">
                {{ news.publish_date }}
              </div>
            </div>
          </div>
          <div v-else m="t-[32px]" grid="~ cols-1 gap-x-[48px] gap-y-[32px]">
            <div v-for="news in industryNews" :key="news.id" flex="~ 1" justify="between" border="b-[1px] solid [#f1f1f1]" text="[16px]" class="point" data-aos="fade-up" data-aos-delay="100" @click="toDetail(news.id)">
              <div>
                <h5 text="[18px]">
                  {{ news.title }}
                </h5>
                <div text="[#1f1f1f66]">
                  {{ newsType[`${news.type}`] }}
                </div>
              </div>
              <div text="[#A1A1A1]" style="width: 120px;text-align: end;">
                {{ news.publish_date }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- </div> -->
</template>

<style scoped lang="postcss">
.bottom-lined:after {
  content: '';
  display: block;
  position: relative;
  height: 3px;
  width: 30px;
  left: 8px;
  top: 8px;
  background-color: #0083ff;
}

.top-lined:before {
  content: '';
  display: block;
  position: relative;
  height: 3px;
  width: 30px;
  left: 8px;
  bottom: 8px;
  background-color: #0083ff;
}
.point {
  cursor: pointer;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.point1 {
  cursor: pointer;
}
.date {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
